@import './mixin'
@import './color'
@import './var'

.container
  +border-box
  padding-bottom: $navHeight

.shopping
  background-color: $grey-200

  > *
    width: 100%
    background-color: $white

  .title
    +font-dpr(18px)
    text-align: center
    margin-bottom: $spacing
    padding: $spacing/2 0

  .list
    +border-box
    padding-bottom: $spacing*3

    .items
      width: 100%
      height: 4.4rem
      // max-height: 300px
      font-size: 0
      overflow: hidden
      border-bottom: 2px solid $grey-200

      img
        width: 40%
      
      .body
        width: 60%
        height: 100%
        float: right
        +display-flex
        +flex-column
        -webkit-box-pack: center
        -ms-flex-pack: center
        justify-content: center
        +border-box
        padding: $spacing/2 $spacing 0
        +font-dpr(10px)

        .title
          font-size: 1.8em
          line-height: 1.7em
          +text-overflow

        .content
          font-size: 1.4em
          line-height: 1.4em
          color: $grey-600

        .footer
          text-align: right
          height: 1em
          font-size: 2em
          color: $blue
